<script lang="ts" setup>
import { ref, computed } from "vue";
import UniSearchBar from "@/components/uni-search-bar/index.vue";
import { AreaWeatherListType } from "@/type/index.ts";
import UniSwipeAction from "@/components/uni-swipe-action/index.vue";
import UniSwipeActionItem from "@/components/uni-swipe-action-item/index.vue";

// 滑动选项
const swipeOptions = ref([{
  text: "删除",
  style: {
    backgroundColor: "#dd524d"
  }
}]);
// 读取天气数据
const areaWeatherListStorage = uni.getStorageSync("areaWeatherList");
const areaWeatherList = ref<AreaWeatherListType[]>([]);
if (areaWeatherListStorage) {
  areaWeatherList.value = JSON.parse(areaWeatherListStorage);
}

/**
 * 删除城市
 */
const swipeActionDelete = (i: number) => {
  areaWeatherList.value.splice(i, 1);
  uni.setStorageSync("areaWeatherList", JSON.stringify(areaWeatherList.value));
  uni.setStorageSync("selectCity", areaWeatherList.value[0].areaName);
};

/**
 * 搜索城市
 */
const searchBarClick = () => {
  uni.navigateTo({
  	url: "/pages/cityChoose/index"
  });
};

/**
 * 添加城市
 */
const addCityClick = () => {
  uni.navigateTo({
  	url: "/pages/cityChoose/index"
  });
};

/**
 * 选择城市
 */
const selectCity = item => {
  uni.setStorageSync("selectCity", item.areaName);
  uni.navigateBack({
    delta: 1
  });
};
</script>

<template>
  <view class="page-city-management">
    <UniSearchBar @search-bar-click="searchBarClick" placeholder="搜索城市" :disabled="true" />
    <view class="city-list">
      <UniSwipeAction>
        <UniSwipeActionItem v-for="(item, i) in areaWeatherList" :key="i" :right-options="swipeOptions" :disabled="item.location">
          <view class="city-item" @click.stop="selectCity(item)">
            <view class="flex">
              <view class="flex1">
                <text class="f-s-40 font-weight color-white">{{ item.areaName }}</text>
                <text v-if="item.location" class="fa fa-map-marker color-white m-l-10"></text>
              </view>
              <view>
                <text class="f-s-40 font-weight color-white">{{ item.areaWeather.now.temperature }}°</text>
              </view>
            </view>
            <view class="flex m-t-20">
              <view class="flex1">
                <text class="f-s-28 color-white">空气{{ item.areaWeather.now.aqiDetail.quality }} {{ item.areaWeather.now.aqiDetail.aqi }}</text>
              </view>
              <view>
                <text class="f-s-28 color-white">{{ item.areaWeather.now.weather }}</text>
              </view>
            </view>
          </view>
          <template v-slot:right>
            <view @click.stop="swipeActionDelete(i)" class="city-item-delete flex flex-center">
              <text class="fa fa-trash-o"></text>
            </view>
          </template>
        </UniSwipeActionItem>
      </UniSwipeAction>
    </view>
    <view @click="addCityClick" class="city-plus">
      <text class="fa fa-plus"></text>
    </view>
  </view>
</template>
